<template>
  <div class="rewardRecord">
    <c-title text="激活奖励"></c-title>
    <div class="cumulative-box">
      <div class="cumulative">
        <div class="item">
          <div class="number">{{ grand_amount }}</div>
          <div>累计加速激活{{ love_name }}</div>
        </div>
      </div>
    </div>
    <van-tabs v-model="active" @change="change" :ellipsis="false">
      <van-tab title="参与奖励激活" :name="1"></van-tab>
      <!-- <van-tab title="加速激活记录" :name="0"></van-tab> -->
      <van-tab title="级差奖励激活" :name="2"></van-tab>
      <van-tab title="平级奖励激活" :name="3"></van-tab>
      <van-tab title="周期奖励激活" :name="4"></van-tab>
    </van-tabs>
    <div class="h-7"></div>
    <div>
      <div class="list-item" v-for="(item, i) in list_data" :key="i">
        <div class="label">
          <div>{{ item.source_name }}</div>
          <div style="color: #f7665b;">{{ item.amount || item.actual_amount }}</div>
        </div>
        <div class="created_at">{{ item.created_at }}</div>
      </div>
    </div>

    <van-empty v-if="list_data.length == 0" description="暂无奖励记录"></van-empty>
  </div>
</template>
<script>
// import mixins from "./components/mixins";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 1,
      last_page: 1,
      current_page: 1,
      list_data: [],
      love_name: "",
      isLoadMore: true,
      grand_amount: 0
    };
  },
  activated() {
    this.init()
    this.getData()
  },
  methods: {
    init() {
      this.grand_amount = 0;
      this.last_page = 1;
      this.current_page = 1;
      this.list_data = [];
      this.isLoadMore = true;
    },
    change() {
        this.getData()
    },
    getData() {
      let url = "",json={};
      if(this.active == 4){
        url="plugin.subscription.frontend.modules.activate.controllers.cycle.index";
      }else{
        url="plugin.subscription.frontend.modules.activate.controllers.quick.index";
         json.source_type=this.active;
      }
      $http.post(url, json).then(res => {
        if (res.result) {
          this.grand_amount = res.data.grand_amount;
          this.list_data = res.data.page_list.data;
          this.love_name = res.data.love_name || "爱心值";
          this.last_page = res.data.page_list.last_page;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return false;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1,
        source_type = this.active,
      url='',json={page};
      if(this.active!==4){
        url ='plugin.subscription.frontend.modules.activate.controllers.quick.index';
        json.source_type = source_type
      }else{
        url ='plugin.subscription.frontend.modules.activate.controllers.cycle.index';
      }
      $http.post(url, json).then(res => {
        this.isLoadMore = true;
        if (res.result) {
          this.list_data = this.list_data.concat(res.data.page_list.data);
          this.last_page = res.data.page_list.last_page;
          this.current_page = res.data.page_list.current_page;
        } else {
          this.$toast(res.msg);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.h-7 {
  height: 0.7rem;
}

.rewardRecord {
  .cumulative-box {
    height: 4.44rem;
    background-color: #ff8924;
    position: relative;
    margin-bottom: 2.72rem;

    .cumulative {
      width: calc(100% - 1rem);
      height: 4.88rem;
      bottom: -50%;
      left: 0.5rem;
      position: absolute;
      background-color: #fff;
      border-radius: 0.31rem;
      text-align: center;
      display: flex;
      align-items: center;
      line-height: 1.25rem;
      font-size: 0.69rem;
      color: #696969;

      .item {
        flex: 1;

        .number {
          color: #f14e4e;
          font-size: 0.88rem;
        }
      }

      .line {
        width: 0.03rem;
        height: 1.88rem;
        background-color: #ddd;
      }
    }
  }

  ::v-deep .van-tabs {
    width: calc(100% - 1rem);
    margin: 0 auto;

    .van-tabs__nav {
      border-radius: 0.31rem;
    }
  }

  ::v-deep .list-box {
    width: calc(100% - 1rem);
    text-align: left;
    margin: 0 auto;
  }

  .list-item {
    padding: 1rem;
    border-radius: 0.31rem;
    background-color: #fff;
    font-size: 0.81rem;
    color: #353535;
    margin-bottom: 0.5rem;

    .created_at {
      text-align: left;
      margin-top: 0.3125rem;
      color: #737373;
    }

    .label {
      display: flex;
      justify-content: space-between;
    }

    .row {
      display: flex;
      justify-content: space-between;

      .number {
        color: #f15353;
      }

      .date {
        color: #606060;
      }
    }

    .row:nth-child(2) {
      margin: 0.6rem 0;
    }
  }
}
</style>
